<template>
    <view>
        <view class="main">
            <view class="input-container">
                <text>输入昵称</text>
                <input type="text" class="input" @input="handleInput" v-model="nicName" />
            </view>
            <!-- 新增自定义头像区域 -->
            <view class="custom-avatar">
                <text style="font-size: 28rpx;color: #CCC;;">我的头像，点击可使用自定义图片</text>
                <view class="avatar-preview" @click="chooseAvatar">
                    <image :src="nic?nic:isnic" mode="widthFix"></image>
                </view>
            </view>
            <view class="nicPic">
                <view class="pic-item" v-for="(item,index) in nicPic" :key="index">
                    <image :src="item" mode="aspectFit" @click="nicbtn(index)"></image>
                </view>
            </view>
            <view class="submit-btn" @click="handleSubmit">提交</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            user: {},
            nicPic: [
                "/static/nicPic/m1.png",
                '/static/nicPic/m2.png',
                '/static/nicPic/m3.png',
                '/static/nicPic/w1.png',
                '/static/nicPic/w2.png',
                '/static/nicPic/w3.png',
            ],
            nicName: '默认昵称',
            customAvatar: '', // 用于存储自定义头像的路径
            nic: "",
            isnic: "/static/nicPic/add.png"
        };
    },
    onLoad() {
        this.user = uni.getStorageSync("user");
		if(this.user){
			this.nicName=this.user.nicName
		}
    },
    methods: {
        nicbtn(i) {
            this.nic = this.nicPic[i];
        },
        handleInput(e) {
            this.nicName = e.detail.value;
        },
        async handleSubmit() {
            const user = this.user;
            const db = uniCloud.databaseForJQL();
            let updateData = {
                "nicName": this.nicName
            };

            if (this.nic) {
                try {
                    const uploadRes = await uniCloud.uploadFile({
                        cloudPath: `avatars/${user.userTel}.jpg`,
                        filePath: this.nic
                    });

                    const urlRes = await uniCloud.getTempFileURL({
                        fileList: [uploadRes.fileID]
                    });

                    if (urlRes) {
                        updateData.nicPic = urlRes.fileList[0].tempFileURL;
                        const updateRes = await db.collection('opendb-poi').where({
                            'userTel': user.userTel
                        }).update(updateData);

                        if (updateRes.code === 0) {
							
                            this.user = {
                                ...this.user,
                                nicName: this.nicName,
                                nicPic: urlRes.fileList[0].tempFileURL
                            };
							console.log('新用户信息'+JSON.stringify(this.user) )
                            uni.setStorageSync("user", this.user);
                            uni.navigateBack();
                        } else {
                            uni.showToast({
                                icon: 'error',
                                title: '信息更新失败'
                            });
                        }
                    }
                } catch (err) {
                    console.error('上传或获取图片 URL 失败:', err);
                    uni.showToast({
                        icon: 'error',
                        title: '图片处理失败'
                    });
                }
            }else{
				uni.navigateBack()
			}
            console.log('提交的昵称:', this.nicName);
            console.log('自定义头像路径:', this.nic);
        },
        chooseAvatar() {
            uni.chooseImage({
                count: 1, // 最多选择 1 张图片
                sourceType: ['album', 'camera'], // 可以从相册或相机选择
                success: (res) => {
                    this.nic = res.tempFilePaths[0];
                },
                fail: (err) => {
                    console.error('选择图片失败:', err);
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.input-container {
    display: flex;
    margin-bottom: 60px;
    margin-top: 100rpx;
    align-items: center;
    .input {
        border: 1px solid #007aff;
        border-radius: 5px;
        margin-left: 10px;
        padding: 5px;
        height: 30px;
    }
}

.custom-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    .avatar-preview {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-bottom: 10px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        &.placeholder {
            color: #999;
        }
    }
}

.nicPic {
    display: flex;
    width: 80%;
    height: 300rpx;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    margin-bottom: 200rpx;
}

.pic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100rpx;
    image {
        width: 100rpx;
        height: 100rpx;
    }
}

.submit-btn {
    padding: 10px 20px;
    width: 200px;
    background-color: #007aff;
    color: white;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}
</style>